<template>
  <div class='mt30'>
    <h5 class='fc333 fs12 like-title pb10 solid-border-bottom'>相似歌曲</h5>
    <ul class="simi-list pt20">
      <li class="simi-item mb10 clearfix"
        v-for='item in simiSongsData' :key=item.key>
        <div class="fl fs12 text">
          <div class="song-name">
            <a href="javascript:;" class="disinblock song-name" :title=item.name>{{ item.name }}</a>
          </div>
          <a href="javascript:;" class="disinblock song-name fcLightgray" :title=item.artist>{{ item.artist }}</a>
        </div>
        <div class="fl opr">
          <a href="javascript:;" class="play-icon disinblock mr20"></a>
          <a href="javascript:;" class="add-icon disinblock"></a>
        </div>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "similarSongs",
  props: ['simiSongs'],
  data() {
    return {
      simiSongsData: [
        {
          artists: []
        }
      ],
    }
  },
  methods: {

  },
  watch: {
    simiSongs() {
      this.simiSongsData = this.simiSongs.songs
      this.simiSongsData.map(item => {
        item.artist = []
        item.artists.map(data => {
          item.artist.push(data.name)
        })
        item.artist = item.artist.join("/")
      })
    }
  }
}
</script>

<style scoped lang="less">
  .text {
    width: 150px;
    .song-name {
      width: 100%;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
  }
  .opr {
    .play-icon, .add-icon {
      width: 10px;
      height: 10px;
      background: url("../../assets/icon2.png") no-repeat;
    }
    .play-icon {
      background-position: -66px -456px;
    }
    .add-icon {
      background-position: -87px -455px;
    }
  }
</style>